<?php defined('SYSPATH') or die(); ?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>多平台广告添加/修改</title>
    {template 'stourtravel/public/public_js'}
    {php echo Common::getCss('style.css,base.css,base_new.css'); }
    {php echo Common::getScript("uploadify/jquery.uploadify.min.js,product_add.js,choose.js,imageup.js,template.js,DatePicker/WdatePicker.js"); }
    <style>
        .change-pic-tip{
            display: inline-block;
            position: absolute;
            bottom: 0;
            height: 18px;
            width: 100%;
            left: 0;
            background: rgba(0, 0, 0, .5);
            color: #ffffff
        }
    </style>
</head>
<body>
<table class="content-tab">
    <tr>
        <td width="119px" class="content-lt-td" valign="top">
            {template 'stourtravel/public/leftnav'}
            <!--右侧内容区-->
        </td>
        <td valign="top" class="content-rt-td ">
            <form method="post" name="product_frm" id="product_frm">
                <div class="cfg-header-bar">
                    <a href="javascript:;" class="fr btn btn-primary radius mt-6 mr-10" onclick="window.location.reload()">刷新</a>
                </div>
                <div class="manage-nr mt-1">
                    <div class="product-add-div">
                        <ul class="info-item-block">
                            <li><span class="item-hd">模板：</span>
                                <div class="item-bd"><span class="item-text ">{$kindname}</span></div>
                            </li>
                            <li><span class="item-hd">显示位置：</span>
                                <div class="item-bd"><span class="item-text ">{$ads['position']}</span></div>
                            </li>
                            <li id="size">
                                <span class="item-hd">广告尺寸：</span>
                                <div class="item-bd">
                                    <span class="item-text">{if $ads['size']=='0'}750*190{else}{$ads['size']}{/if}</span>
                                </div>
                            </li>
                            <li>
                                <span class="item-hd">操作：</span>
                                <div class="item-bd">
                                    <div class="typeid_9999">
                                        <a href="javascript:;" class="btn btn-primary radius size-S ml-10" onclick="addLink.showView(this,'.attr-sel',1)" title="选择链接">添加广告</a>
                                    </div>
                                    <div class="apply-tab-wrap typeid_9999" style="display:block">

                                        <div class="apply-tab-block mt-10 pr-20">
                                            <table class="table table-border table-bordered" id="dlg_tb"> </table>
                                            <div class="btn-block">
                                                <div class="pm-btm-msg" id="page_info"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
            </form>
        </td>
    </tr>
</table>

<!--广告列表视图-->
<script type="text/html" id="ads_view_tpl">
    <tr>
        <th width="50">排序</th>
        <th>广告类型</th>
        <th>广告描述</th>
        <th>广告图片</th>
        <th>广告标题</th>
        <th>广告链接</th>
        <th width="150">显示端</th>
        <th width="150">管理</th>
    </tr>
    {{each list}}
    <tr class="tb-item">
        <td>
            <input placeholder="" type="text" data-id="{{$value.id}}" class="row-edit-txt ad-displayorder" value="{{ $value.displayorder }}" name="displayorder">
        </td>
        <td>{{$value.adTypeName}}</td>
        <td>{{$value.addis}}</td>
        <td>
            {{if $value.adsrc}}
            <a class="example-image-link add-ad-pic" data-id="{{$value.id}}" style="position: relative">
                <img class="example-image" src="{{$value.adsrc}}">
                <span class="change-pic-tip">点击更换</span>
            </a>
            {{else}}
            <a class="btn btn-primary radius size-S add-ad-pic" data-id="{{$value.id}}" href="javascript:void (0);">上传图片</a>
            {{/if}}
        </td>
        <td>
            <input value="{{$value.adname}}" class="input-text" name="ads_name" data-id="{{$value.id}}" placeholder="填写广告标题">
        </td>
        <td>
            {{if $value.adtype == 4}}
            appId：{{$value.appId}}<br>
            路径：{{$value.appPath}}
            {{else}}
            {{$value.adlink}}
            {{/if}}
        </td>
        <td>
            {loop $client $ck $cv}
            <label class="radio-label" data-id="{{$value.id}}" style="padding:0 5px;">
                {{if $value.adtype == 4 && {$ck} == '1'}}
<!--                H5端不支持跳转小程序-->
                {{else}}
                {{if $value.client_no.split(',').indexOf("{$ck}")> -1 }}
                <input type="checkbox" name="client[]" value="{$ck}" checked="checked">{$cv}&nbsp;
                {{else}}
                <input type="checkbox" name="client[]" value="{$ck}">{$cv}&nbsp;
                {{/if}}
                {{/if}}
            </label>
            {/loop}
        </td>
        <td>
            <a class="delete delete-ads" data-id="{{$value.id}}" href="javascript:void (0);">删除</a>
        </td>
    </tr>
    {{/each}}
</script>
</body>
<script type="text/javascript">
    var client = <?php echo json_encode($client, JSON_UNESCAPED_UNICODE); ?>;
    var page = 1;
    // 广告选择
    var addLink = {
        showView: function () {
            // 显示广告选择
            var prefix = "{$prefix}";
            var params = {
                loadCallback: addLink.chooseLink,
                loadWindow: window
            };
            var url = SITEURL + 'uniapp/dialog_link/number/{$ads["number"]}/prefix/' + prefix;
            ST.Util.showBox('添加广告', url, '900', '600', null, null, document, params);
        },
        chooseLink: function (res, type) {
            var postData = {
                adType: res.adType,
                linkData: JSON.stringify(res.data),
                prefix:'{$prefix}',
                number:'{$ads["number"]}',
                custom_label:'{$ads["custom_label"]}',
            };
            // 添加数据到数据库
            $.post(SITEURL + "uniapp/add_ads", postData, function (res) {
                if(res.status){
                    getAdsList();
                }else{
                    ST.Util.showMsg(res.msg, 5, 1000);
                }
            },'json');
        }
    };
    // 初始获取广告
    getAdsList();

    // 获取广告列表
    function getAdsList() {
        ST.Util.showMsg('', 6, 90000);
        var postData = {
            page: page,
            prefix:'{$prefix}',
            number:'{$ads["number"]}',
            custom_label:'{$ads["custom_label"]}',
        };
        $.post(SITEURL + "uniapp/get_ads_list", postData, function (res) {
            ST.Util.hideMsgBox();
            // 渲染列表
            if (res.status) {
                showList(res.data);
            } else {
                ST.Util.showMsg(res.msg, 5, 1000);
            }
        }, 'json')
    }

    // 渲染列表数据
    function showList(data) {
        //渲染列表
        var tpl = "ads_view_tpl";
        var html = template(tpl, data);
        $("#dlg_tb").html(html);
        // 渲染页码
        var pageHtml = ST.Util.page(data.pagesize, data.page, data.total, 5);
        $("#page_info").html(pageHtml);
        $("#page_info a").click(function () {
            page = $(this).attr('page');
            getAdsList();
        });
        // 初始化端选择
        startClientInit();
        // 初始化图片上传
        startPicInit();
        // 初始化删除
        startDelAds();
        // 初始化排序字段
        startDisplayInit();
        // 初始化广告标题
        startAdName();
    }

    // 初始化图片上传
    function startPicInit() {
        $('.add-ad-pic').click(function () {
            var id = $(this).attr('data-id');
            ST.Util.showBox('选择图片', SITEURL + 'image/insert_view/iswater/0', 0, 0, null, null, document, {
                loadWindow: window,
                loadCallback: function (res, status) {
                    if (status) {
                        if(res.data[0]){
                            var temp = res.data[0].split('$$');
                            updateField(id,'adsrc',temp[0])
                        }
                    }
                }
            });
        });
    }

    // 初始化排序字段
    function startDisplayInit() {
        $('.ad-displayorder').on('blur',function () {
            var val = $(this).val();
            var id = $(this).attr('data-id');
            updateField(id,'displayorder',val)
        });
    }

    // 初始化广告标题
    function startAdName() {
        $('input[name="ads_name"]').on('blur',function () {
            var val = $(this).val();
            var id = $(this).attr('data-id');
            updateField(id,'adname',val)
        });
    }


    // 初始化端选择
    function startClientInit() {
        $('input[name="client[]"]').change(function () {
            var arr = [];
            $(this).parent().parent().find("input").each(function (i) {
                if ($(this).attr('checked')) {
                    arr.push($(this).val())
                }
            });
            var id = $(this).parent().attr('data-id');
            var val = arr.join(",");
            updateField(id,'client_no',val);
        });
    }

    // 更新广告字段
    function updateField(id,field,data) {
        var postData = {
            id: id,
            field: field,
            val: data
        };
        $.post(SITEURL + "uniapp/update_ads_field", postData ,function (res) {
            if(res.status){
                getAdsList();
            }else{
                ST.Util.showMsg(res.msg, 5, 1000);
            }
        },'json');
    }

    // 初始化删除
    function startDelAds() {
        $('.delete-ads').on('click',function () {
            var id = $(this).attr('data-id');
            $.post(SITEURL + "uniapp/del_ads", {id:id} ,function (res) {
                if(res.status){
                    getAdsList();
                }
            },'json');
        });
    }

    // 检查是否在数组中
    function in_array(needle, haystack) {
        var len = haystack.length,
            bool = -1;
        for (var i = 0; i < len; i++) {
            if (haystack[i] == needle) {
                bool = i;
            }
        }
        return bool;
    }
</script>
</html>